import React from 'react';
import {connect} from 'dva';
import {Route, Switch} from 'dva/router';
import {TabBar} from 'antd-mobile';
import {FaXianPage} from "./FaXianPage";
// import {ShouYiPage} from "./ShouYiPage";
// import {ListViewPage} from "./ListViewPage";

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'blueTab',
    };
  }

  renderContent(pageText) {
    return (
      <div style={{backgroundColor: 'white', height: '100%', textAlign: 'center'}}>
        <div style={{paddingTop: 60}}>Clicked “{pageText}” tab， show “{pageText}” information</div>
      </div>
    );
  }

  render() {
    const {match, location, history} = this.props;
    return (
      <div>
        <Switch>
          <Route path={`${match.url}/faxian`} exact component={FaXianPage}></Route>
          <Route path={`${match.url}/list`} exact render={(props) => (<div>收益页面</div>)}/>
          <Route path={`${match.url}/wode`} exact render={(props) => (<div>我的页面</div>)}/>
        </Switch>
        <div style={{position: 'fixed', bottom: 0, width: '100%'}}>
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            noRenderContent={true}
          >
            <TabBar.Item
              title="发现"
              key="faxian"
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../assets/index/faxian.svg')}) center center /  21px 21px no-repeat`
              }}
              />
              }
              selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('../assets/index/faxian_ac.svg')}) center center /  21px 21px no-repeat`
              }}
              />
              }
              selected={location.pathname === `${match.url}/faxian`}
              onPress={() => {
                if (location.pathname !== `${match.url}/faxian`) {
                  history.push(`${match.url}/faxian`)
                }
              }}
              data-seed="logId"
            >
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${require('../assets/index/shouyi.svg')}) center center /  21px 21px no-repeat`
                }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${require('../assets/index/shouyi_ac.svg')}) center center /  21px 21px no-repeat`
                }}
                />
              }
              title="收益"
              key="shouyi"
              // dot
              selected={location.pathname === `${match.url}/list`}
              onPress={() => {
                if (location.pathname !== `${match.url}/list`) {
                  history.push(`${match.url}/list`)
                }
              }}
            >
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${require('../assets/index/wode.svg')}) center center /  21px 21px no-repeat`
                }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${require('../assets/index/wode_ac.svg')}) center center /  21px 21px no-repeat`
                }}
                />
              }
              title="我的"
              key="wode"
              selected={location.pathname === `${match.url}/wode`}
              onPress={() => {
                if (location.pathname !== `${match.url}/wode`) {
                  history.push(`${match.url}/wode`)
                }
              }}
            >
            </TabBar.Item>
          </TabBar>
        </div>
      </div>
    );
  }
}

IndexPage.propTypes = {};

export default connect()(IndexPage);
